<!-- 调解中心结构树 -->
<template>
	<div id="structureTree" ref="treeRef"></div>
</template>
<script setup name="structureTree">
	import { Graph, treeToGraphData, register, Rect, ExtensionCategory } from '@antv/g6'
	// ===========================================DATA======================================================
	const emit = defineEmits(['getNodeData'])
	const treeData = ref({})
	let treeRef = ref()
	let treeGraph
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(async () => {
		await getData()
		nextTick(() => {
			initTree()
			// window.addEventListener('resize', resizeTree)
		})
	})
	// ===========================================METHODS==================================================

	const initTree = () => {
		if (treeGraph) {
			treeGraph.destroy()
		}
		class CustomNode extends Rect {
			//定义副文本样式
			getSubTitleStyle(atrs) {
				const [width, height] = this.getSize(atrs)
				return {
					x: 0,
					y: height / 4,
					fontSize: 32,
					fontWeight: 600,
					letterSpacing: 2,
					text: '1.75%',
					fill: '#fff',
					textAlign: 'center',
					textBaseline: 'middle',
					textOverflow: 'ellipsis',
					wordWrapWidth: width * 0.9,
					wordWrap: true,
					maxLines: 1
				}
			}
			//绘制名称
			drawSubtitle(atrs, container) {
				const nameStyle = this.getSubTitleStyle(atrs, container)
				if (atrs.name) {
					this.upsert('subtitle', 'text', nameStyle, container)
				}
			}
			render(attributes, container) {
				// console.log('attributes', attributes)
				// 渲染
				super.render(attributes, container)
				this.drawSubtitle(attributes, container)
			}
		}
		register(ExtensionCategory.NODE, 'custom-node', CustomNode)
		treeGraph = new Graph({
			container: treeRef.value,
			autoFit: 'view',
			data: treeToGraphData(treeData.value),
			zoomRange: [0.1, 3],
			behaviors: [
				'drag-canvas',
				'zoom-canvas',
				{ key: 'hover-activate', type: 'hover-activate' },
				{ type: 'click-select', state: 'selected', trigger: ['click'] },
				{ type: 'collapse-expand', trigger: 'dblclick', animation: false }
			],
			node: {
				type: 'custom-node',
				animation: false,
				//处理节点自身样式
				style: (d) => {
					//公共样式
					const commonStyle = {
						size: [250, 150],
						radius: 8,
						name: d.name,
						id: d.id,
						// fill:'#95de64',
						labelOffsetX: 0,
						labelOffsetY: -15,
						labelMaxWidth: '90%',
						labelText: d.name,
						labelFontSize: 32,
						labelFontWeight: 600,
						// lineWidth: 3,
						labelFill: '#fff',
						labelLetterSpacing: 2,
						labelPlacement: 'center',
						labelTextOverflow: 'ellipsis',
						labelWordWrap: true,
						// labelBackgroundFill: '#1677ff50',
						// labelBackgroundStroke: '#1677ff',
						ports: [{ placement: 'right' }, { placement: 'left' }],
						subtitle: d.name.subtitle
					}
					//全国
					if (d.level && d.level === 1) {
						return {
							fill: '#73d13d',
							...commonStyle
						}
					} else if (d.level && d.level === 2) {
						return {
							fill: '#ffd666',
							...commonStyle
						}
					} else if (d.level && d.level === 3) {
						return {
							fill: '#ff7875',
							...commonStyle
						}
					} else {
						return {
							fill: '#69b1ff',
							...commonStyle
						}
					}
				},
				state: {
					selected: (d) => {
						return {
							labelFontSize: 32,
							labelFontWeight: 600,
							fill:
								d.level && d.level === 1
									? '#389e0d'
									: d.level === 2
										? '#d48806'
										: d.level === 3
											? '#d9363e'
											: '#108ee9',
							stroke: ''
						}
					},
					hover: () => {
						return {
							fill: '#e9ecef', // 悬停时填充色
							stroke: '#495057', // 悬停时边框色
							lineWidth: 2
						}
					}
				}
			},
			edge: {
				type: 'polyline', // 多段折线类型
				style: {
					radius: 8,
					stroke: '#fff',
					strokeWidth: 3,
					lineWidth: 3,
					router: {
						type: 'orth'
					}
				},
				state: {
					active: {
						stroke: '#000',
						labelBackgroundStroke: '#000',
						lineWidth: 3
					}
				}
			},
			layout: {
				type: 'compact-box',
				direction: 'LR',
				// nodeSep: 30,
				// rankSep: 250,
				getHGap: () => 170,
				getVGap: () => 70,
				// getWidth: () => 200,
				// getHeight: () => 40,
				fitView: true
			},
			plugins: [
				{
					type: 'contextmenu',
					// 只开启小组右键菜单，默认全部元素都开启
					enable: (e) => {
						return e.targetType === 'node' && e.target.attributes.id.length === 5
					},
					getItems: () => {
						return [{ name: '查看详情', value: 'detail' }]
					},
					onClick: (...args) => {
						console.log('处理一些右侧联动的交互', args[2])
					}
				},
				{
					type: 'tooltip',
					enable: (e) => e.targetType === 'node',
					getContent: (e, items) => {
						return `<div>节点:${e.target.id}</div>`
					}
				}
			]
		})
		treeGraph.render()
		treeGraph.on('node:click', (e) => {
			setTimeout(() => {
				const isSelected = treeGraph.getElementState(e.target.id).includes('selected')
				if (isSelected) {
					// console.log('选中节点后的处理', isSelected, e)
					// console.log('所属关系', getRelation(e.target.id))
					emit('getNodeData', getRelation(e.target.id))
				}
			}, 500)
		})
	}
	//重绘
	const resizeTree = () => {
		if (treeGraph) {
			treeGraph.resize()
		}
	}
	// ===========================================REQUEST==================================================
	const getData = async () => {
		treeData.value = {
			id: '000000',
			name: '全国',
			children: [
				{
					id: '1',
					name: '北京调解中心',
					level: 1,
					children: [
						{
							id: '1-1',
							name: '360',
							children: [
								{ id: '1-1-a', name: 'group-1', level: 1 },
								{ id: '1-1-b', name: 'group-2', level: 2 },
								{ id: '1-1-c', name: 'group-3', level: 3 }
							]
						},
						{
							id: '1-2',
							name: '微财科技',
							children: [
								{ id: '1-2-a', name: 'group-4', level: 2 },
								{ id: '1-2-b', name: 'group-5', level: 3 }
							]
						}
					]
				},
				{
					id: '2',
					name: '天津调解中心',
					children: [
						{
							id: '2-1',
							name: '度小满',
							children: [
								{ id: '2-1-a', name: 'group-6', level: 2 },
								{ id: '2-1-b', name: 'group-7', level: 1 },
								{ id: '2-1-c', name: 'group-8', level: 3 }
							]
						},
						{
							id: '2-2',
							name: '盐城洋钱罐',
							children: [
								{ id: '2-2-a', name: 'group-9' },
								{ id: '2-2-b', name: 'group-10' }
							]
						}
					]
				},
				{
					id: '3',
					name: '西安调解中心',
					children: [
						{
							id: '3-1',
							name: '盐城京东',
							children: [
								{ id: '3-1-a', name: 'group-11' },
								{ id: '3-1-b', name: 'group-12' },
								{ id: '3-1-c', name: 'group-13' }
							]
						},
						{
							id: '3-2',
							name: 'group-14',
							children: [
								{ id: '3-2-a', name: 'group-15' },
								{ id: '3-2-b', name: 'group-16' }
							]
						}
					]
				},
				{
					id: '4',
					name: '远安调解中心',
					children: [
						{
							id: '4-1',
							name: '安润金融',
							children: [
								{ id: '4-1-a', name: 'group-17' },
								{ id: '4-1-b', name: 'group-18' },
								{ id: '4-1-c', name: 'group-19' }
							]
						},
						{
							id: '4-2',
							name: '	贝壳金融',
							children: [
								{ id: '4-2-a', name: 'group-20' },
								{ id: '4-2-b', name: 'group-21' },
								{ id: '4-2-c', name: 'group-22' }
							]
						}
					]
				},
				{
					id: '9',
					name: '济南调解中心',
					children: [
						{
							id: '9-1',
							name: '民商事调解项目',
							children: [
								{ id: '9-1-a', name: '家事调解组' },
								{ id: '9-1-b', name: '合同纠纷组' },
								{ id: '9-1-c', name: '债务处理组' }
							]
						},
						{
							id: '9-2',
							name: '劳动争议项目',
							children: [
								{ id: '9-2-a', name: '薪酬纠纷组' },
								{ id: '9-2-b', name: '工伤调解组' }
							]
						}
					]
				},
				{
					id: '5',
					name: '银川调解中心',
					children: [
						{
							id: '5-1',
							name: '民族纠纷项目',
							children: [
								{ id: '5-1-a', name: '文化调解组' },
								{ id: '5-1-b', name: '宗教事务组' }
							]
						},
						{
							id: '5-2',
							name: '土地资源项目',
							children: [
								{ id: '5-2-a', name: '宅基地纠纷组' },
								{ id: '5-2-b', name: '耕地保护组' }
							]
						}
					]
				},
				{
					id: '6',
					name: '海南调解中心',
					children: [
						{
							id: '6-1',
							name: '旅游纠纷项目',
							children: [
								{ id: '6-1-a', name: '酒店服务组' },
								{ id: '6-1-b', name: '导游投诉组' },
								{ id: '6-1-c', name: '景区管理组' }
							]
						},
						{
							id: '6-2',
							name: '自贸区商事项目',
							children: [
								{ id: '6-2-a', name: '跨境贸易组' },
								{ id: '6-2-b', name: '投资争议组' }
							]
						}
					]
				},
				{
					id: '7',
					name: '盐城调解中心',
					children: [
						{
							id: '7-1',
							name: '环境保护项目',
							children: [
								{ id: '7-1-a', name: '污染纠纷组' },
								{ id: '7-1-b', name: '生态补偿组' }
							]
						},
						{
							id: '7-2',
							name: '渔业纠纷项目',
							children: [
								{ id: '7-2-a', name: '捕捞权争议组' },
								{ id: '7-2-b', name: '水产养殖组' }
							]
						}
					]
				},
				{
					id: '8',
					name: '廊坊调解中心',
					children: [
						{
							id: '8-1',
							name: '京津冀协同项目',
							children: [
								{ id: '8-1-a', name: '产业转移组' },
								{ id: '8-1-b', name: '跨区通勤组' },
								{ id: '8-1-c', name: '区域协作组' }
							]
						},
						{
							id: '8-2',
							name: '社区治理项目',
							children: [
								{ id: '8-2-a', name: '物业纠纷组' },
								{ id: '8-2-b', name: '邻里调解组' }
							]
						}
					]
				}
			]
		}
		// await fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
		// 	.then((res) => res.json())
		// 	.then((data) => {
		// 		// treeData.value = data
		// 	})
	}
	//获取所属关系数据
	const getRelation = (id) => {
		let com = {}
		let pro = {}
		let relationData = {}
		if (id.length !== 6) {
			treeData.value.children.forEach((company) => {
				com = { ...company }
				delete com.children
				if (company.id === id) {
					relationData = {
						...com,
						type: 'company'
					}
				} else {
					company.children.forEach((project) => {
						pro = { ...project }
						delete pro.children
						if (project.id === id) {
							relationData = {
								...com,
								project: pro,
								type: 'project'
							}
						} else {
							project.children.forEach((team) => {
								if (team.id === id) {
									pro.team = team
									relationData = {
										...com,
										project: pro,
										type: 'team'
									}
								}
							})
						}
					})
				}
			})
		} else {
			relationData = {
				type: 'all'
			}
		}
		return relationData
	}
</script>
<style lang="less" scoped>
	#structureTree {
		width: 100%;
		height: 100%;
		// background: #fff;
		padding: 16px;
		overflow: hidden;
	}
</style>
